html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #282a37;
}

.list {
  width: 700px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.list .tag {
  border-radius: 100px;
  height: 30px;
  flex-shrink: 0;
  margin: 5px;
  opacity: 0;
}

.list .tag:nth-child(1) {
  width: 89px;
  background-color: #1c67e9;
  animation: move 0.3s linear 2500ms forwards;
}

.list .tag:nth-child(2) {
  width: 117px;
  background-color: #c1398e;
  animation: move 0.3s linear 2450ms forwards;
}

.list .tag:nth-child(3) {
  width: 191px;
  background-color: #6e9334;
  animation: move 0.3s linear 2400ms forwards;
}

.list .tag:nth-child(4) {
  width: 186px;
  background-color: #445b0b;
  animation: move 0.3s linear 2350ms forwards;
}

.list .tag:nth-child(5) {
  width: 83px;
  background-color: #fc4992;
  animation: move 0.3s linear 2300ms forwards;
}

.list .tag:nth-child(6) {
  width: 93px;
  background-color: #ed2e61;
  animation: move 0.3s linear 2250ms forwards;
}

.list .tag:nth-child(7) {
  width: 100px;
  background-color: #b4e6fa;
  animation: move 0.3s linear 2200ms forwards;
}

.list .tag:nth-child(8) {
  width: 186px;
  background-color: #510918;
  animation: move 0.3s linear 2150ms forwards;
}

.list .tag:nth-child(9) {
  width: 93px;
  background-color: #eafce7;
  animation: move 0.3s linear 2100ms forwards;
}

.list .tag:nth-child(10) {
  width: 116px;
  background-color: #a5db41;
  animation: move 0.3s linear 2050ms forwards;
}

.list .tag:nth-child(11) {
  width: 159px;
  background-color: #318cc9;
  animation: move 0.3s linear 2000ms forwards;
}

.list .tag:nth-child(12) {
  width: 149px;
  background-color: #aadb58;
  animation: move 0.3s linear 1950ms forwards;
}

.list .tag:nth-child(13) {
  width: 144px;
  background-color: #d45122;
  animation: move 0.3s linear 1900ms forwards;
}

.list .tag:nth-child(14) {
  width: 144px;
  background-color: #27535b;
  animation: move 0.3s linear 1850ms forwards;
}

.list .tag:nth-child(15) {
  width: 190px;
  background-color: #e1f3d2;
  animation: move 0.3s linear 1800ms forwards;
}

.list .tag:nth-child(16) {
  width: 135px;
  background-color: #037a6e;
  animation: move 0.3s linear 1750ms forwards;
}

.list .tag:nth-child(17) {
  width: 186px;
  background-color: #7a68a6;
  animation: move 0.3s linear 1700ms forwards;
}

.list .tag:nth-child(18) {
  width: 102px;
  background-color: #53c836;
  animation: move 0.3s linear 1650ms forwards;
}

.list .tag:nth-child(19) {
  width: 96px;
  background-color: #1e57e7;
  animation: move 0.3s linear 1600ms forwards;
}

.list .tag:nth-child(20) {
  width: 97px;
  background-color: #a18232;
  animation: move 0.3s linear 1550ms forwards;
}

.list .tag:nth-child(21) {
  width: 119px;
  background-color: #39d2b1;
  animation: move 0.3s linear 1500ms forwards;
}

.list .tag:nth-child(22) {
  width: 135px;
  background-color: #79df8c;
  animation: move 0.3s linear 1450ms forwards;
}

.list .tag:nth-child(23) {
  width: 98px;
  background-color: #ceaa70;
  animation: move 0.3s linear 1400ms forwards;
}

.list .tag:nth-child(24) {
  width: 89px;
  background-color: #bd0b92;
  animation: move 0.3s linear 1350ms forwards;
}

.list .tag:nth-child(25) {
  width: 134px;
  background-color: #448cc8;
  animation: move 0.3s linear 1300ms forwards;
}

.list .tag:nth-child(26) {
  width: 105px;
  background-color: #3ad2bf;
  animation: move 0.3s linear 1250ms forwards;
}

.list .tag:nth-child(27) {
  width: 190px;
  background-color: #453985;
  animation: move 0.3s linear 1200ms forwards;
}

.list .tag:nth-child(28) {
  width: 193px;
  background-color: #509b4f;
  animation: move 0.3s linear 1150ms forwards;
}

.list .tag:nth-child(29) {
  width: 91px;
  background-color: #4ba3f1;
  animation: move 0.3s linear 1100ms forwards;
}

.list .tag:nth-child(30) {
  width: 174px;
  background-color: #447d40;
  animation: move 0.3s linear 1050ms forwards;
}

.list .tag:nth-child(31) {
  width: 82px;
  background-color: #a472bd;
  animation: move 0.3s linear 1000ms forwards;
}

.list .tag:nth-child(32) {
  width: 82px;
  background-color: #c8cf1b;
  animation: move 0.3s linear 950ms forwards;
}

.list .tag:nth-child(33) {
  width: 179px;
  background-color: #4a645e;
  animation: move 0.3s linear 900ms forwards;
}

.list .tag:nth-child(34) {
  width: 98px;
  background-color: #23082c;
  animation: move 0.3s linear 850ms forwards;
}

.list .tag:nth-child(35) {
  width: 152px;
  background-color: #bbd597;
  animation: move 0.3s linear 800ms forwards;
}

.list .tag:nth-child(36) {
  width: 163px;
  background-color: #3174c1;
  animation: move 0.3s linear 750ms forwards;
}

.list .tag:nth-child(37) {
  width: 81px;
  background-color: #d8a4ee;
  animation: move 0.3s linear 700ms forwards;
}

.list .tag:nth-child(38) {
  width: 142px;
  background-color: #fc5d23;
  animation: move 0.3s linear 650ms forwards;
}

.list .tag:nth-child(39) {
  width: 141px;
  background-color: #7384be;
  animation: move 0.3s linear 600ms forwards;
}

.list .tag:nth-child(40) {
  width: 186px;
  background-color: #ddae68;
  animation: move 0.3s linear 550ms forwards;
}

.list .tag:nth-child(41) {
  width: 91px;
  background-color: #45a344;
  animation: move 0.3s linear 500ms forwards;
}

.list .tag:nth-child(42) {
  width: 177px;
  background-color: #a2db21;
  animation: move 0.3s linear 450ms forwards;
}

.list .tag:nth-child(43) {
  width: 151px;
  background-color: #882595;
  animation: move 0.3s linear 400ms forwards;
}

.list .tag:nth-child(44) {
  width: 199px;
  background-color: #d0d8df;
  animation: move 0.3s linear 350ms forwards;
}

.list .tag:nth-child(45) {
  width: 90px;
  background-color: #84b398;
  animation: move 0.3s linear 300ms forwards;
}

.list .tag:nth-child(46) {
  width: 128px;
  background-color: #0dd6d1;
  animation: move 0.3s linear 250ms forwards;
}

.list .tag:nth-child(47) {
  width: 165px;
  background-color: #57ab31;
  animation: move 0.3s linear 200ms forwards;
}

.list .tag:nth-child(48) {
  width: 138px;
  background-color: #ce4cb8;
  animation: move 0.3s linear 150ms forwards;
}

.list .tag:nth-child(49) {
  width: 185px;
  background-color: #e5ba7e;
  animation: move 0.3s linear 100ms forwards;
}

.list .tag:nth-child(50) {
  width: 153px;
  background-color: #6cdfda;
  animation: move 0.3s linear 50ms forwards;
}

.list .tag:nth-child(51) {
  width: 150px;
  background-color: #39079c;
  animation: move 0.3s linear 0ms forwards;
}

@keyframes move {
  0% {
    transform: translateY(-180px) scaleX(1) scaleY(1);
    opacity: 1;
  }
  60% {
    transform: translateY(30px) scaleX(1.4) scaleY(0.8);
  }
  75% {
    transform: translateY(-15px) scaleX(1.2) scaleY(1.2);
  }
  90% {
    transform: translateY(5px) scaleX(1.1) scaleY(0.9);
  }
  100% {
    transform: translateY(0) scaleX(1) scaleY(1);
    opacity: 1;
  }
}
